<!--首页数据展示-->
<template>
  <!--滚动条-->
  <el-scrollbar height="88vh">
    <div style="padding: 0 10px;box-sizing: border-box">
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="4" v-for="tag in tagList">
          <el-card class="smallBox">
            <div :style="{background: tag.color,width: '5px',height: '80px',float: 'left'}">
            </div>
            <div style="float: left;margin-left: 10px">
              <p style="font-size: 16px;font-weight: bolder">{{tag.name}}</p>
              <span style="font-size: 14px;font-weight: bolder">{{tag.num}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="14">
          <el-card class="detailCard">
            <el-row :gutter="10">
              <el-col :span="22">
                <el-table :data="auditData" height="300px">
                  <el-table-column label="编号" prop="id" align="center" width="55" type="index"/>
                  <el-table-column label="申请单号" prop="applyNumber" align="center"/>
                  <el-table-column label="申请人" prop="applyName" align="center"/>
                  <el-table-column label="申请人手机号" prop="phone" align="center"/>
                  <el-table-column label="申请类型" prop="applyType" align="center"
                                   :formatter="applyTypeFormatter"/>
                  <el-table-column label="申请时间" prop="applyTime" align="center"/>

                </el-table>
              </el-col>
              <el-col :span="2">
                <!--刷新页面-->
               <el-button type="primary" link  @click="reload">
                 <el-icon style="font-size: 16px;font-weight: bolder;margin-top: 12px">
                   <Refresh />
                 </el-icon>
               </el-button>
                <el-button type="primary"
                           style="position: absolute;bottom: 10px;right: 10px"
                           @click="handle">
                  处理
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card class="detailCard">
            <el-row :gutter="10">
              <el-col :span="6" v-for="item in routerList" style="margin-top: 25px">
                <el-button :type="item.type" circle
                           style="width: 80px;height:80px;"
                           @click="handleClick(item.path)">
                  <el-icon size="35px">
                    <component :is="item.icon" />
                  </el-icon>
                </el-button>
                <p style="font-size: 12px;margin-top: 10px">{{item.txt}}</p>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="12">
          <el-card class="canvasCard" >
            <div ref="chartRef" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div ref="chartContainer" class="chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import router from "@/router";
import * as echarts from 'echarts';
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import axios from "axios";
const applyTypeList = ref([]);
onMounted(() => {
  loadDictOptions(applyTypeList, 'applyType')
});
const applyTypeFormatter = (row, column, cellValue, index) => {
  if (!applyTypeList.value) {
    return cellValue;
  }
  for (let item of applyTypeList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const reload = () => {
    loadAudit();
}
const tagList = ref([
  {color: '#409EFF', name: '使用中', num: 25},
  {color: '#67C23A', name: '借用中', num: 22},
  {color: '#E6A23C', name: '已报废', num: 8},
  {color: '#F56C6C', name: '维修中', num: 10},
  {color: '#909399', name: '闲置中', num: 12},
  {color: '#C0C4CC', name: '调拨中', num: 13}
]);
const routerList = ref([
  {type: 'primary', icon: 'TakeawayBox', txt: '固定资产', path: '/fixed'},
  {type: 'primary', icon: 'Notebook', txt: '虚拟资产', path: '/virtual'},
  {type: 'primary', icon: 'ShoppingTrolley', txt: '供应商', path: '/supplier'},
  {type: 'primary', icon: 'Folder', txt: '附件表', path: '/attachment'},
  {type: 'primary', icon: 'OfficeBuilding', txt: '楼宇管理', path: '/build'},
  {type: 'primary', icon: 'User', txt: '员工列表', path: '/user'},
  {type: 'primary', icon: 'Plus', txt: '申请', path: '/apply'},
  {type: 'primary', icon: 'Setting', txt: '字典设置', path: '/dict'},
]);
const handleClick = (path) => {
  // 使用 window.location.href 强制刷新并导航到新路径
  window.location.href = path;
};
const chartData = [
  {value: 25, name: '使用中'},
  {value: 22, name: '借用中'},
  {value: 8, name: '已报废'},
  {value: 10, name: '维修中'},
  {value: 12, name: '闲置中'},
  {value: 13, name: '调拨中'}
];
const total = chartData.reduce((acc, item) => acc + item.value, 0);

// 获取 DOM 元素的引用
const chartRef = ref(null);

onMounted(() => {
  // 基于准备好的 DOM，初始化 echarts 实例
  const myChart = echarts.init(chartRef.value);
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: `总计 ${total}`, // 总计数字显示在中间
      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: 24,
        fontWeight: 'bold'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'], // 环形图内外半径
        avoidLabelOverlap: false,
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: chartData
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
let password = getUser().password;
let id = getUser().id;
let refreshCount = sessionStorage.getItem('refreshCount') ? parseInt(sessionStorage.getItem('refreshCount'), 10) : 0;

// 监听页面加载事件，增加刷新计数
window.addEventListener('load', () => {
  sessionStorage.setItem('refreshCount', ++refreshCount);
});

// 使用全局前置守卫来处理登出逻辑
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    sessionStorage.removeItem('refreshCount'); // 清空刷新次数
  }
  next();
});

onMounted(() => {
  if (password === '123456' && refreshCount === 0) { // 只有当刷新次数为0时才显示消息框
    ElMessageBox({
      title: '修改密码',
      message: '您的密码太过简单，请尽快修改密码！',
      customClass: 'custom-message-box',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      router.push('/info?id=' + id);
    }).catch(() => {
      // 点击取消时，增加刷新次数以避免再次显示此消息框
      sessionStorage.setItem('refreshCount', ++refreshCount);
    });
  }
});
const auditData = ref([]);
const loadAudit = () => {
  let data = qs.stringify({
    auditUserId: getUser().id,
    auditStatus: "10"
  });
  axios.get(BASE_URL + '/v1/audit/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          auditData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
onMounted(() => {
  loadAudit();
})
const handle = () => {
  router.push('/audit');
}
const chartContainer = ref(null);
let chartInstance = null;

const chartOptions = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['申请数量'],
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ['scrap', 'repair', 'busrequire', 'roomrequire', 'purchase']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '申请数量',
      type: 'bar',
      data: [5, 20, 36, 10, 10] // 这里填入实际数据
    }
  ]
};

onMounted(() => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    chartInstance.setOption(chartOptions);
  }
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
.smallBox {
  height: 80px;
  padding: 0;
}
.detailCard {
  height: 350px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.canvasCard {
  height: 400px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
.chart {
  width: 80%;
  height: 400px;
}
</style>
<style>
.el-card__body{
  padding: 0;
}
</style>